<template>
  <div id="orderdetail">
    <div class="detail">
      <div class="top">
        <span>订单详情</span>
        <span @click="toPre()">返回上一页</span>
      </div>
      <div class="detailbox">
        <div class="boxtop">
          <span>订单编号:{{orderNum}}</span>
          <span>下单时间:{{toOrdertime}}</span>
          <span @click="remind()">提醒发货</span>
        </div>
        <div class="boxbot">
          <!-- 订单信息 -->
          <div class="orderinfo">
            <span>订单信息</span>
            <span>
              订单状态：
              <span style="font-size:14px;color: #FE2C4A ">{{orderstate}}</span>
            </span>
            <span>订单备注：{{ordernote}}</span>
          </div>
          <!-- 收货信息 -->
          <div class="takeinfo">
            <span>收货信息</span>
            <span>收货人：{{taker}}</span>
            <span>收货地址：{{takeaddress}}</span>
          </div>
          <!-- 发票信息 -->
          <div class="invoiceinfo">
            <span>发票信息</span>
            <span>发票类型：{{invoicetype}}</span>
            <span>发票抬头：{{invoiceowner}}</span>
          </div>
          <!-- 物流信息 -->
          <div class="logisticsinfo">
            <span>物流信息</span>
            <span>快递单号：{{lognum}}</span>
            <span>发货时间：{{logtime}}</span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottop">
          <span>商品信息</span>
          <span>优惠</span>
          <span>金额</span>
        </div>
        <div class="show">
          <ul class="list">
            <li v-for="(item,index) in orderDetail" :key="index">
              <img class="goodsimg" :src="item.imgurl" alt />
              <div class="right">
                <div class="top">
                  <span>{{item.goodsdesc}}</span>
                </div>
                <div class="bot">
                  <span>{{item.goodsprice}}元/件</span>
                  <span>
                    <img src="../../../assets/image/chenghao.png" alt />
                    {{item.selectnum}}
                  </span>
                </div>
              </div>
            </li>
          </ul>
          <div class="youhui">
            <span>某耨耨优惠券</span>
            <span>10.00</span>
          </div>
          <div class="jiage">
            <span>{{total}}元</span>
            <span>(含运费{{fee}}元)</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 提醒发货成功模态框 -->
    <div class="remindSuccess" v-show="flag">
      <!-- 提醒发货成功小图标 -->
      <div class="successIcon">
        <img src="../../../assets/image/1_1_2_icon_success.png" alt />
      </div>
      <span>提醒发货成功！</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false, //提醒发货成功模态框出现效果
      ordernote:
        "这里是备注内容，这里是备注内容，这里是备注内容这里是备注内容。", //订单备注
      taker: "黎明", //收货人
      takeaddress: "金轮新都汇809", //收货地址
      invoicetype: "普通发票（个人）", //发票类型
      invoiceowner: "黎明", //发票抬头
      lognum: "2910384422049", //快递单号
      logtime: "", //发货时间
      //  待发货订单列表
      orderState: "待发货", //订单状态 如 待支付  已完成 待发货 待收货等
      orderNum: "2021-07-10 14:40", //订单编号
      toOrdertime: "447456123231456", //下单时间
      total: 800, //总价
      fee: 20.0, //运费
      orderDetail: [
        {
          imgurl: "", //商品图片url
          goodsdesc:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指 键帽衬PVC吸汗带,D型下颏带 ", //商品名称或者描述
          goodsprice: "120.0", //商品价格
          selectnum: 2 //选择该商品的数量
        },
        {
          imgurl: "", //商品图片url
          goodsdesc:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指 键帽衬PVC吸汗带,D型下颏带 ", //商品名称或者描述
          goodsprice: "120.0", //商品价格
          selectnum: 2 //选择该商品的数量
        }
      ]
    };
  },
  methods: {
    //   返回上一页事件
    toPre() {
      this.$router.push({ path: "/personalCenter/myorder" });
    },
    // 提醒发货事件
    remind() {
      this.flag = true;
      setTimeout(() => {
        this.flag = false;
      }, 2000);
    }
  }
};
</script>

<style lang="scss" scoped>
// 提醒发货成功模态框
.remindSuccess {
  width: 180px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 10px;
  color: #fff;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 修改成功小图标
  .successIcon {
    width: 30px;
    height: 30px;
    margin: 15px auto;
  }
}
@mixin info {
  margin: 30px 0;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  height: 90px;
  //   border: 1px solid red;
  justify-content: space-between;
  span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
  }

  & span:nth-of-type(1) {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
}
.detail {
  min-height: 519px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 5px 0px rgba(204, 196, 196, 0.15);
  padding-bottom: 20px;
  .top {
    height: 60px;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    display: flex;
    align-items: center;
    & span:nth-of-type(1) {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-left: 30px;
    }
    & span:nth-of-type(2) {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(128, 128, 128, 1);
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .detailbox {
    margin: 20px 30px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(230, 230, 230, 1);
    min-height: 400px;
    .boxtop {
      height: 36px;
      background: rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      & span:nth-of-type(1) {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
        margin-left: 20px;
      }
      & span:nth-of-type(2) {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
      }
      & span:nth-of-type(3) {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(17, 131, 217, 1);
        margin-right: 30px;
        cursor: pointer;
      }
    }
    .boxbot {
      .orderinfo {
        @include info();
      }
      .takeinfo {
        @include info();
      }
      .invoiceinfo {
        @include info();
      }
      .logisticsinfo {
        @include info();
      }
    }
  }
  .bottom {
    min-height: 120px;
    margin: 0 30px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(230, 230, 230, 1);
    .bottop {
      height: 36px;
      background: rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      & span:nth-of-type(1) {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
        margin-left: 20px;
      }
      & span:nth-of-type(2) {
        margin-left: 206px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
      }
      & span:nth-of-type(3) {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
        margin-right: 110px;
      }
    }
    .show {
      display: flex;
      min-height: 124px;
      justify-content: space-between;
      .list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 320px;
        padding: 14px;
        margin-top: 0px;
        border-right: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        flex-direction: column;
        flex: 3;
        li:last-child {
          margin-bottom: 0px;
        }

        li {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          .goodsimg {
            // flex: 1;
            width: 100px;
            height: 100px;
            border: 1px solid gray;
          }
          .right {
            flex: 2;
            display: flex;
            flex-direction: column;
            align-content: space-between;
            .top {
              margin-top: -30px;
              //   background-color: #fff;
              margin-bottom: 10px;
              padding: 0;
              border-bottom: none;
              span {
                margin-left: 10px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 18px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(77, 77, 77, 1);
              }
            }
            .bot {
              display: flex;
              margin-top: -8px;
              align-items: center;
              padding-left: 30px;
              box-sizing: border-box;
              span {
                margin-left: -20px;
              }
              & span:nth-of-type(1) {
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(254, 44, 74, 1);
              }
              & span:nth-of-type(2) {
                display: flex;
                align-items: center;
                font-size: 10px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(77, 77, 77, 1);
                margin-left: 8px;
                img {
                  width: 10px;
                  height: 10px;
                }
              }
            }
          }
        }
      }
      .youhui {
        flex: 2;
        border-right: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(77, 77, 77, 1);
        }
        & span:nth-of-type(1) {
          margin-bottom: 6px;
        }
      }
      .jiage {
        width: 40px;
        flex: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        & span:nth-of-type(1) {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(254, 44, 74, 1);
          margin-bottom: 10px;
        }
        & span:nth-of-type(2) {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(128, 128, 128, 1);
        }
      }
    }
  }
}
</style>
